<template>
   <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span class="search-text">
          <svg-icon name="yustart"
          :size="35"
          color="blue"/>
          创作模块
        </span>

        <div class="search_btns_tab">
            <el-button class="button" text>
              <svg-icon name="all"
              :size="20"
              :margin="5"
              @click="toMainPage"
              color="blue"/>
                全部
            </el-button>
            <el-button class="button" text>
              <svg-icon name="t"
                  :size="20"
                  :margin="5"
                  color="blue"/>
                平台文案
            </el-button>
            <el-button class="button" text>
              <svg-icon name="t"
                  :size="20"
                  :margin="5"
                  color="blue"/>
                工具
            </el-button>
        </div>

        <div class="search_input">
          <el-input 
            class="search_input_inner"
            v-model="data.searchKey" 
            placeholder="Please input" 
            width="30" 
            clearable   
            />
        </div>
      </div>
    </template>
    <!-- <div class="search-content-box"> -->
      <el-scrollbar class="search-content-box">
        <ul class="search-content-box-ul">
          <li class="search-content-box-li"
           v-for="searchItem in searchContent"
          @click="addWorkItem(searchItem)">
            <ContentItem
            :dataObj="searchItem||{}"/>
          </li>
        </ul>
      </el-scrollbar>
    <!-- </div> -->
  </el-card>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import {useStore} from 'vuex'
import ContentItem from './ContentItem.vue'
import {getModelDetail} from '../api/index.js'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';

const store = useStore()
const curUser = computed(() => store.state.curUser)
const searchContent = computed(() => store.state.searchContent);
const data = ref({
  searchKey:'',
})
const router = useRouter();
const toMainPage = () => {
  router.push({path:'/'})
}

const addWorkItem = (it) => {
  let id = it.id;
  // 保存worklist
  localStorage.setItem('worklist', JSON.stringify(store.state.workList));
  // 请求detail
  let res = getModelDetail(curUser.value.token, id)
  res.then((dataP) => {
    if (dataP.data.code == 200) {
      store.dispatch('setSearchItem', {data: dataP.data.resp_data, id: id})
      console.log('拿到detail', dataP.data.resp_data);
      store.dispatch('addWorkItem', id)
      let pos = store.state.workList.length - 1// 再worklist中的位置
      store.dispatch('setCurSelPos', pos)
  
        // 内容详情显示
        let path = '';
        if (dataP.data.resp_data.type == 1) {
          path = '/Search/ArticleRepeatItem';
        }else {
          path = '/Search/item';
        }
        router.push({
          path,
          query: {
            id
          }
        })

    }
  }).catch(e=> {
    console.log(e);
    ElMessage.error('网络错误');
  })
}
</script>

<style scoped>
.box-card {
    width: 1200px;
    height: 600px;
  }
.header{
  position: relative; 
}
.search_btns_tab {
    position: absolute;
    left: 50%;
    transform: translate(0, -85%);
}

.search-text {
  font-size: 20px;
  font-weight: bold;
}
.search_input {
  position: absolute;
  right: 5%;
  transform: translate(0px, -95%);
}
.search_input_inner{
  width: 200px;
}

.search-content-box {
  height: 450px;
  margin: 10px;
}
.search-content-box-ul {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.search-content-box-li {
  width: 23%;
  list-style: none;
  height: 180px;
  margin: 10px;
  position: relative;
  
}



</style>
